{% extends 'basic_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <form name="Form" role="search" action="/oratk_app/oratk_select_ora_shell" onsubmit="return validateForm()"
              target="_blank" method="POST">
            <h2 class="page-header">ORATK 工具</h2>
            {#    <div class="table-responsive">#}
            <div class="navbar-form navbar-left">
                &nbsp 选择实例: &nbsp
                <select class="selectpicker show-tick " style="width:450px" data-live-search="true" name="conn_string"
                        id="conn_string">
                    <option id="def">--请选择实例名--</option>
                    <option id="usedb">使用脚本内实例</option>
                    <optgroup label="total:{{ instanceinfo_result_total }}">
                        {% for i in instanceinfo_result %}
                            <option
                                    data-content="
                <div>{{ i.id }}.{{ i.dbname }}</div>
                <div style='padding-left: 15px;'><small>{{ i.conn_string }}</small></div>
            "
                                    value="{{ i.id }}.{{ i.dbname }}={{ i.conn_string }}">
                            </option>
                        {% endfor %}
                    </optgroup>
                </select>

                &nbsp 脚本命令: &nbsp
                {#            data-show-subtext="true"#}
                <select class="selectpicker show-tick " data-show-subtext="true" style="width:450px"
                        data-live-search="true" name="command"
                        id="command">
                    <option id="def">--请选择脚本命令--</option>
                    <optgroup label="total:{{ script_args_result_total }}">
                        {% for i in script_args_result %}
                            <option id="a">{{ i }}</option>
                        {% endfor %}
                    </optgroup>
                </select>
                <input type="text" name="command_args" class="form-control" placeholder="command args" id="command_args"
                       namd="command_args" style="width: 200px">
                <button type="button" data-loading-text="Loading..." class="btn btn-default" id="args_refresh"><span
                        class="glyphicon glyphicon-refresh" data-toggle="tooltip" data-placement="top"
                        title="获取最新脚本命令"></span>
                </button>
                <button type="button" data-loading-text="Loading..." class="btn btn-primary" id="btSearch">查询(本页展示）
                </button>
                <button type="submit" class="btn btn-primary" id="btSearch_new">查询(新页展示）</button>
                <div>&nbsp</div>
                {#                <div>#}
                {#                    disabled="disabled"#}
                {#                    <textarea  type="text" id="args_value_explain" class="form-control" readonly rows="1"#}
                {#                              style="width: 1200px ;display:none;" ></textarea>#}
                {#                </div>#}
                <div id="args_value_explain">
                </div>
                <div id='exec_type_tag'>&nbsp</div>
                <div>&nbsp</div>
                <div id="tab_detail"></div>
            </div>
        </form>

    </div>

{% endblock %}

{% block script %}
    <script>
        //当点击刷新时
        //重新获取最新脚本命令
        $('#args_refresh').click(function () {
            console.log('args_refresh')
            //发送ajax请求
            $.ajax({
                type: "POST",
                url: "/oratk_app/oratk_select_ora_shell_args_refresh", //后台处理函数的url
                cache: false,
                dataType: "html",
                beforeSend: function () {
                    // $('#loadingModal').modal({backdrop: 'static', keyboard: false});
                    showLoading()
                    $('#args_refresh').button('loading')
                },
                complete: function () {
                    //$('#loadingModal').modal('hide');
                    hideLoading()
                    $('#args_refresh').button('reset')
                },
                success: function (result) {
                    if (result.substr(0, 3) == 'ERR') {
                        //alert(result);
                        var iconType = "error";
                        var title = "刷新失败";
                        var result = result;
                        let iscancelButton = false;
                        // 调用公共方法弹窗
                        showAlert(title, result, iconType, iscancelButton);
                    } else {

                        $("#args_value").append().html(result);
                        {#$("#args_value").html(result);#}
                        //使用refresh方法更新UI以匹配新状态。
                        $('#args_value').selectpicker('refresh');
                        //render方法强制重新渲染引导程序 - 选择ui。
                        $('#args_value').selectpicker('render');
                        window.location.href = window.location.href;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                },
            })

        })


        //当点击（查询（新页展示））时
        function validateForm() {
            var select_conn = $('#conn_string').find("option:checked").attr("id")
            if (select_conn == 'def') {
                var iconType = "error";
                var title = "检查失败";
                var result = "请选择实例";
                let iscancelButton = false;
                // 调用公共方法弹窗
                showAlert(title, result, iconType, iscancelButton);
                return false;
            }
            var args_value = $('#args_value').find("option:checked").attr("id")
            if (args_value == 'def') {
                var iconType = "error";
                var title = "检查失败";
                var result = "请选择命令";
                let iscancelButton = false;
                // 调用公共方法弹窗
                showAlert(title, result, iconType, iscancelButton);
                return false;
            }

        }

        //当点击"查询(本页展示)时，输入框值检查及ajax异步调用"
        $('#btSearch').click(function () {
            var select_conn = $('#conn_string').find("option:checked").attr("id")
            if (select_conn == 'def') {
                var iconType = "error";
                var title = "检查失败";
                var result = "请选择实例";
                let iscancelButton = false;
                // 调用公共方法弹窗
                showAlert(title, result, iconType, iscancelButton);
                return;
            }
            var args_value = $('#command').find("option:checked").attr("id")
            if (args_value == 'def') {
                var iconType = "error";
                var title = "检查失败";
                var result = "请选择命令";
                let iscancelButton = false;
                // 调用公共方法弹窗
                showAlert(title, result, iconType, iscancelButton);
                return;
            }
            var select_conn_id = $('#conn_string').find("option:checked").attr("u_info")
            //发送ajax请求
            $.ajax({
                type: "POST",
                data: {
                    'conn_string': $('#conn_string').val(),
                    'command': $('#command').val(),
                    'command_args': $('#command_args').val(),
                    'submit_id': 0
                },
                url: "/oratk_app/oratk_select_ora_shell", //后台处理函数的url
                cache: false,
                dataType: "html",
                beforeSend: function () {
                    // $('#loadingModal').modal({backdrop: 'static', keyboard: false});
                    showLoading()
                    $('#btSearch').button('loading')
                },
                complete: function () {
                    //$('#loadingModal').modal('hide');
                    hideLoading()
                    $('#btSearch').button('reset')
                },
                success: function (result) {
                    $("#tab_detail").html(result);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                },
            })


        })

        //显式脚本命令说明
        $('#command').change(function () {
            var command_id = $('#command').find("option:checked").attr("id")

            if (command_id == 'def') {
                $('#args_value_explain').empty()
            } else {
                $.ajax({
                    type: "POST",
                    data: {
                        'args': $('#command').val(),
                    },
                    url: "/oratk_app/oratk_select_ora_shell_args_explain", //后台处理函数的url
                    cache: false,
                    dataType: "html",
                    success: function (result) {
                        $('#args_value_explain').html(result)
                        $('#command_args').val('')
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.responseText);
                    },
                })
            }
        })

    </script>


{% endblock %}